<template>
    <!--藏品页面-->
    <div class="box">
        <br>
        <div class="left">
            <div class="scoreBar">
                <div style="background-color:rgb(9, 14, 20); height: 100%; width:100%; border-radius: 20px; ">
                    <div class="text1"><b>373</b></div>
                    <div class="text2"><b>总成就得分</b></div>

                    <div class="text1"><b>27</b></div>
                    <div class="text2"><b>已经历的历程点</b></div>
                </div>
            </div>

            <input v-model="searchInput" class="clientInput search" placeholder="搜索"/>
        </div>
        <div class="right">
            <div v-show="sortedHerosData?.length == 0" class="tip">
                <b>没有找到相关的英雄</b>
            </div>
            <ul>
                <li v-for="h in sortedHerosData" :key="h.heroId">
                    <img class="hero-img touXiangBox" 
                        :src="`//game.gtimg.cn/images/lol/act/img/skinloading/${h.heroId}000.jpg`"
                    />
                    <a class="heroName">{{h.name}}</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'HerosWin',
    data(){
        return{
            //搜索输入
            searchInput: '',

            //从英雄联盟服务器获取的英雄列表数据
            herosData: [],
        }
    },
    computed:{
        //筛选后的英雄列表数据
        sortedHerosData:{
            get(){
                //如果查找内容为空 就返回全部英雄数据
                if(this.searchInput == ''){
                    return this.herosData.hero
                }else{
                    //否则 使用filter过滤并返回keyword中包含查找内容的英雄
                    return  this.herosData.hero.filter((h)=>{
                        return h.keywords.indexOf(this.searchInput) != -1
                    })
                }
            }
        }
    },
    methods:{
        //向英雄联盟官方服务器发送请求获取英雄列表数据
        getherosData(){
            axios.get("//game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js").then(
                //请求成功
                respones => {
                    console.log("英雄列表数据请求成功", respones.data);
                    this.herosData = respones.data
                    return respones.data
                },
                //请求失败
                error => {
                    console.log("英雄列表数据请求失败", error.message);
                    return []
                }
            )
        },
        
        //向英雄联盟官方服务器发送请求获取英雄皮肤数据
        getSkinData(){
            axios.get("//game.gtimg.cn/images/lol/act/img/js/cuSkinList/cuskin_list.js").then(
                //请求成功
                respones => {
                    console.log("皮肤列表数据请求成功", respones.data);
                    return respones.data
                },
                //请求失败
                error => {
                    console.log("皮肤列表数据请求失败", error.message);
                    return []
                }
            )
        },
    },
    mounted(){
        //获取数据
        this.getherosData()
    },
}
</script>

<style scoped>

    .box{
        height: 100%; 
        width: 100%;
        background-color: rgb(9, 14, 20);
        background-image: linear-gradient(rgb(9, 14, 20), rgb(9, 14, 20),rgb(5, 49, 70));
        background-image: radial-gradient(circle 1400px at 50% -10%, rgb(9, 14, 20),rgb(9, 14, 20),rgb(5, 49, 70));
    }

    .left{
        height: 100%;
        width: 25%;
        float: left;
    }
    
    .right{
        height: 100%;
        width: 74.5%;
        float: left;
    }

    ul{
        height: 95%;
        overflow: auto;
        padding: 0;
    }

    ul li{
        float: left;
        margin-left: 15px;
        margin-right: 15px;
        margin-bottom: 40px;
        list-style: none;
        display: block;
        line-height: 15px;
    }

    .touXiangBox{
        border: 1px solid rgb(56, 53, 42);
    }

    .touXiangBox:hover{
        border-image: linear-gradient(0deg, rgb(255, 172, 64), rgb(254, 255, 223)) 20 20;
    }

    .heroName{
        color: rgb(187, 187, 187);
        font-size: 15px;
        display: block;
        text-align: center;
        margin-top: 10px;
    }

    .hero-img{
        width: 160px;
        height: 240px;
        object-position: center top;
        object-fit: cover;
        filter: brightness(60%);
    }

    .hero-img:hover{
        filter: brightness(100%);
    }

    .scoreBar{
        margin-top: 45px;
        margin-left: auto;
        margin-right: auto;

        border-radius: 20px;
        background-image: linear-gradient(rgb(61, 49, 19), rgb(92, 74, 36));
        padding: 3px;

        height: 25%;
        width: 70%;

        text-align: center;
        color: rgb(189, 177, 110);
        line-height: 10px;
    }

    .text1{
        padding-top: 20px;
        margin-top: 20px;
        font-size: 45px;
        height: 40px;
        color: transparent;
        background-clip: text;
        background-image: linear-gradient(rgb(240, 224, 153), rgb(94, 65, 3));
    }

    .text2{
        padding: 5px;
        margin-top: -10px;
        font-size: 15px;
        height: 10px;
        color: rgb(172, 160, 144);
    }

    .search{
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;

        height: 30px;
        width: 60%;

        background-color: rgba(0, 0, 0, 1);
    }

    .tip{
        color: rgb(172, 160, 144);
        text-align: center;
        font-size: 25px;
        margin-top: 30%;
    }
</style>